<template>
  <div>
    <!-- 1.用ref起个名 -->
    <input type="text" ref="dom">
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';

// 2.声明变量 变量名跟ref名字一致
const dom = ref()
console.log(dom) //undefined dom没加载完

onMounted(() => {
  console.log(dom)
  // 获取input框的焦点
  dom.value.focus()
})

// 等待dom加载完后执行
nextTick(() => {
  console.log(dom.value, 'nextTick')
})

</script>

<style scoped></style>